<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="Generator" content="EditPlus®">
    <title>用户管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
    </style>
    <script src="/layui/layui.js"></script>
    <script src="/webjars/jquery/jquery.js"></script>
</head>
<body>
<table class="layui-hide" id="userInfoTable" lay-filter="userInfoTable"></table>
</body>
<script type="text/html" id="checkboxTpl">
    <div th:if="${updateReadonly}!=null">
        <input type="checkbox" name="lock" value="{{d.uId}}" title="锁定" disabled="disabled" lay-filter="lock"
               {{ d.block== true ? 'checked' : '' }} >
    </div>
    <div th:if="${updateReadonly}==null">
        <input type="checkbox" name="lock" value="{{d.uId}}" title="锁定"  lay-filter="lock"
               {{ d.block== true ? 'checked' : '' }} >
    </div>
</script>
<script type="text/html" id="listTpl">

    {{#  layui.each(d.roles, function(index, item){ }}
    <span>{{ item.rName}}</span>，
    {{#  }); }}
    {{#  if(d.roles.length == 0){ }}
    无数据
    {{#  } }}

</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn" lay-event="addUser" th:classappend="${insertReadonly}"><i class="layui-icon"></i>添加
        </button>
        <button class="layui-btn" lay-event="deleteUser" th:classappend="${deleteReadonly}"><i class="layui-icon"></i>删除
        </button>
        <button class="layui-btn" lay-event="getCheckData">获取数据</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" th:classappend="${deleteReadonly}" lay-event="del">删除</button>
</script>
<script type="text/html" id="addUser">
    <div style="padding: 50px;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="uName" required lay-verify="required" placeholder="请输入用户名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密&#160;码</label>
                <div class="layui-input-inline">
                    <input type="password" name="uPassword" required lay-verify="required" placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" required lay-verify="required|phone|number"  placeholder="请输入手机号"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="checkbox" th:each="r:${roles}" name="rId" th:value="${r.rId}" th:title="${r.rName}">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</script>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table
            , form = layui.form;
        var insertUser;
        var uinfo = [
            {type: 'checkbox', fixed: 'left'}
            , {field: 'uId', title: 'ID', sort: true, fixed: 'left'}
            , {field: 'uName', title: '用户名', align: 'center'}
            , {field: 'phone', title: '电话', align: 'center'}
            , {field: 'uCreatetime', title: '注册时间', align: 'center'}
            , {field: 'block', title: '是否锁定', align: 'center', templet: '#checkboxTpl', unresize: false}
            , {field: 'roles', title: '角色', align: 'center', templet: '#listTpl ', unresize: false}
            , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
        ];
        //添加实例
        table.render({
            elem: '#userInfoTable'
            , url: '/userInfo/all' //数据接口
            , toolbar: '#toolbarDemo'
            , defaultToolbar: ['filter', 'print', 'exports']
            , title: '用户数据表'
            , cols: [uinfo]
            , response: {
                statusCode: 200
            }
            , page: true //开启分页
        });
        //头工具栏事件
        table.on('toolbar(userInfoTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event === 'getCheckData') {
                var data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            } else if (obj.event === 'addUser') {
                insertUser = layer.open({
                    type: 1,
                    title: '添加用户',
                    skin: 'layui-layer-rim', //加上边框
                    area: '460px', //宽高
                    content: $('#addUser').html(),
                });
                form.render();
                table.reload('userInfoTable');
            } else if (obj.event === 'deleteUser') {
                var data = checkStatus.data;
                if (data.length > 0) {
                    layer.confirm('真的删除行么', function (index) {
                        //删除
                        layer.close(index)
                        $.ajax({
                            url: 'userInfo/all/',
                            type: 'delete',
                            data: JSON.stringify(data),
                            contentType: "application/json",
                            success: function (data) {
                                //重新渲染table
                                table.reload('userInfoTable');
                            }
                        });
                    });
                }
                ;
            }
            ;
        });
        //监听工具条
        table.on('tool(userInfoTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.uId + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index)
                    //删除
                    $.ajax({
                        url: 'userInfo/user/' + data.uId,
                        type: 'delete',
                        success: function (data) {
                            console.log("删除成功");
                        }
                    })
                });
            }
        });
        //监听锁定操作
        form.on('checkbox(lock)', function (obj) {
            var uId = this.value;
            var block = obj.elem.checked;
            //发送请求
            $.ajax({
                url: 'userInfo/lock?id=' + uId + '&block=' + block,
                type: 'put',
                success: function (data) {
                    layer.tips(obj.elem.checked, obj.othis);
                }
            })

        });
        
        //监听用户添加
        form.on('submit(formDemo)', function (data) {
            var arr = new Array();
            $("input:checkbox[name='rId']:checked").each(function(i){
                var obj={'rId':$(this).val(),'rName':''};
                arr[i] = obj;
            });

            data.field['roles'] = arr;//将数组合并成字符串
            console.log(JSON.stringify(data.field));
            $.ajax({
                url: 'userInfo/user',
                type: 'post',
                data: JSON.stringify(data.field),
                traditional: true,
                contentType: "application/json",
                success: function (data) {
                    if (data.code==200) {
                        layer.msg("添加成功");
                    }else{
                        layer.msg("添加失败："+data.msg);
                    }
                    //关闭弹窗
                    layer.close(insertUser);
                    table.reload('userInfoTable');
                }
            });
            return false;
        });
    });

</script>
</html>